<template>
	<uni-popup ref="popupRef" type="center">
		<view class="main" v-if="info">
			<image :src="path" mode="widthFix" style="width: 600rpx;border-radius: 20rpx;"></image>
			<l-painter ref="painterRef" isCanvasToTempFilePath @success="path = $event" hidden
				css="width:600rpx;background: linear-gradient( 180deg, #FFE6E6 0%, #FFFFFF 100%);">
				<l-painter-image :src="info.get_member?.avatar"
					css="width: 118rpx; height: 118rpx;margin:36rpx auto 0;border-radius:59rpx;" />
				<l-painter-view css="margin: auto;width:470rpx;text-align:center;">
					<l-painter-text :text="`我是${info.get_member?.nickname}`" css="color:#3D3D3D;padding:22rpx 0 34rpx" />
				</l-painter-view>
				<l-painter-view css="margin: auto;width:470rpx;text-align:center;margin-bottom:64rpx;">
					<l-painter-text text="正在参加许愿" css="color:#3D3D3D;" />
					<l-painter-text text="0元" css="color:#FE4369" />
					<l-painter-text text="拿商品活动一起瓜分奖池奖励" css="color:#3D3D3D" />
				</l-painter-view>

				<l-painter-view css="background: #FFFFFF;border-radius: 20rpx;margin:0 22rpx;display:flex;padding:20rpx;">
					<l-painter-image :src="info.image" css="width: 142rpx; height: 142rpx;border-radius: 20rpx;margin-right:18rpx;" />
					<l-painter-view css="flex:1;">
						<l-painter-view css="">
							<l-painter-text css="line-clamp: 2;color:#191818;font-size: 26rpx;"
								:text="info.goods_name" />
						</l-painter-view>
						<l-painter-view css="">
							<l-painter-text :text="`￥${info.price}`"
								css="color:#191818;font-size: 32rpx;color: #FF0404;margin-top:18rpx;" />
						</l-painter-view>
					</l-painter-view>
				</l-painter-view>

				<l-painter-view css="width:600rpx">
					<l-painter-image :src="info.ewm" css="width: 206rpx; height: 206rpx;margin:50rpx auto 30rpx" />
				</l-painter-view>
				<l-painter-view css="width:600rpx;text-align:center;padding-bottom:70rpx;">
					<l-painter-text text="帮我助力最低可得" css="font-size: 28rpx;color: #929292;" />
					<l-painter-text text="1000心愿值" css="font-size: 28rpx;color: #E38D0C;" />
				</l-painter-view>
			</l-painter>
			<view class="btn" @click="handleSave">
				保存图片到相册
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	const path = ref('')
	const popupRef = ref(null)

	const close = () => {
		popupRef.value.close()
	}
	let info = ref({})
	const open = (item) => {
		console.log(item)
		info.value = item
		popupRef.value.open()
	}
	const painterRef = ref(null)
	const handleSave = () => {
		painterRef.value.canvasToTempFilePathSync({
			fileType: "png",
			// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
			pathType: 'url',
			quality: 1,
			success: (res) => {
				console.log(res.tempFilePath);
				// 非H5 保存到相册
				// H5 提示用户长按图另存

				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: function() {
						console.log('save success');
					}
				});

			},
		});
	}
	defineExpose({
		close,
		open
	})
</script>

<style lang="scss" scoped>
	.main {
		width: 600rpx;
		// height: 945rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
	}

	.btn {
		width: 458rpx;
		height: 88rpx;
		background: #FE4369;
		border-radius: 200rpx;
		line-height: 88rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: -152rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>